<template>
  <div>
    <el-row class="home" :gutter="20">
      <el-col :span="8">
        <!--用户信息-->
        <el-card shadow="hover">
          <div class="user">
            <img :src="userImg"/>
            <div class="userinfo">
              <p class="name">log.info</p>
              <p class="role">超级管理员</p>
            </div>
          </div>
          <div class="login_info">
            <p>上次登录时间：<span>2020-07-05</span></p>
            <p>上次登录地点：<span>崇立苑</span></p>
          </div>
        </el-card>
        <el-card shadow="hover" style="height: 500px;margin-top: 20px">
          <el-table :data="tableData" stripe align="center">
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="今日统计" prop="todayCount"></el-table-column>
            <el-table-column label="本月统计" prop="monthCount"></el-table-column>
            <el-table-column label="全部" prop="count"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <!--数据整理区域-->
        <div class="num">
          <el-card shadow="hover" v-for="item in countData" v-bind:key="item.title" :body-style="{display: 'flex', padding: '0px' }">
            <i class="icon" :class="`el-icon-${item.iconCss}`" :style="{background:item.tagColor}"></i>
            <div class="detail">
              <p class="dnum">{{item.sum}}</p>
              <p class="txt">{{item.title}}</p>
            </div>
          </el-card>
        </div>
        <!--中间图表-->
        <el-card shadow="hover">
          <div id="main" style="height: 280px"></div>
        </el-card>
        <!--底部两图表-->
        <el-card shadow="hover" style="margin-top: 20px">
          <div id="main1" style="height: 280px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 1.导入 echarts
import echarts from 'echarts'
export default {
  data() {
    return {
      // 头像
      userImg: 'https://avatar.csdnimg.cn/4/7/9/2_joe14103_1591614261.jpg',
      // 统计数据数组
      countData: [],
      tableData: [],
      // 图表一数据
      goodsData: [],
      goodsName: [],
      goodsDataDTO: {},
      // 图表二数据
      usersData: [],
      usersName: [],
      usersDTO: {}
    }
  },
  created() {
    // 左下表格数据
    this.getTableData()
    // 右上统计数据
    this.getCountData()
  },
  methods: {
    // 左下表格数据
    async getTableData() {
      const result = await this.$http.get('/api/getTable')
      if (result.data.code !== 200) {
        return this.$message.error('获取表格数据失败')
      }
      this.tableData = result.data.data
    },
    async getCountData() {
      const result = await this.$http.get('/api/getTag')
      if (result.data.code !== 200) {
        return this.$message.error('获取统计数据失败')
      }
      this.countData = result.data.data
    }
  },
  async mounted() {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    var myChart1 = echarts.init(document.getElementById('main1'))
    const result = await this.$http.get('/api/getGoodsCount')
    if (result.data.code !== 200) {
      return this.$message.error('获取订单详情数据失败')
    }
    this.goodsDataDTO = result.data.data
    for (var i = 0; i < this.goodsDataDTO.nameList.length; i++) {
      this.goodsData.push(this.goodsDataDTO.countList[i])
      this.goodsName.push(this.goodsDataDTO.nameList[i])
    }
    const result1 = await this.$http.get('/order/getCount')
    if (result1.data.code !== 200) {
      return this.$message.error('获取订单数据失败')
    }
    this.usersDTO = result1.data.data
    for (var j = 0; j < this.usersDTO.nameList.length; j++) {
      this.usersData.push(this.usersDTO.countList[j])
      this.usersName.push(this.usersDTO.nameList[j])
    }
    // 4.准备数据和配置项
    var option = {
      title: {
        text: '巴黎公社 支援兵种数量'
      },
      tooltip: {},
      legend: {
        data: ['请求支援(个)']
      },
      xAxis: {
        data: this.goodsName,
        axisLabel: {
          // 该属性设置成0则表示强制显示所有标签，设置为1的话，隔一个标签显示一个标签
          interval: 0,
          // 代表X轴文字逆时针旋转45度
          rotate: 45
        }
      },
      yAxis: {},
      series: [{
        name: '个数',
        type: 'bar',
        data: this.goodsData,
        itemStyle: {
          normal: {
            // 1.柱状图颜色处理
            color: function (params) {
              // 2.注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
              // 3.如果希望自动循环已经有的颜色循环显示，可以添加一个判断[给大于颜色数量的柱体添加循环颜色的判断]
              var index
              if (params.dataIndex >= colorList.length) {
                index = params.dataIndex - colorList.length
                return colorList[index]
              }
              return colorList[params.dataIndex]
            }
          }
        }
      }]
    }
    var option1 = {
      title: {
        text: '巴黎公社 请求支援次数'
      },
      tooltip: {},
      legend: {
        data: ['请求支援(次)']
      },
      xAxis: {
        data: this.usersName,
        axisLabel: {
          // 该属性设置成0则表示强制显示所有标签，设置为1的话，隔一个标签显示一个标签
          interval: 0,
          // 代表X轴文字逆时针旋转45度
          rotate: 45
        }
      },
      yAxis: {},
      series: [{
        name: '次数',
        type: 'bar',
        data: this.usersData,
        itemStyle: {
          normal: {
            // 1.柱状图颜色处理
            color: function (params) {
              // 2.注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
              // 3.如果希望自动循环已经有的颜色循环显示，可以添加一个判断[给大于颜色数量的柱体添加循环颜色的判断]
              var index
              if (params.dataIndex >= colorList.length) {
                index = params.dataIndex - colorList.length
                return colorList[index]
              }
              return colorList[params.dataIndex]
            }
          }
        }
      }]
    }
    // 5.(展示数据)使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    myChart1.setOption(option1)
  }
}
</script>

<style lang="less" scoped>
.home{
  .user{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #CCC;
    img{
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
    .userinfo{
      .name{
        font-size: 32px;
        margin-bottom: 10px;
      }
      .role{
        color: #999;
      }
    }
  }
  .login_info{
    p{
      line-height: 28px;
      font-size: 14px;
      color: #999;
      span{
        color: #666;
        margin-left: 60px;
      }
    }
  }
  .num{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card{
      width: 32%;
      margin-bottom: 20px;
    }
    .icon {
      font-size: 30px;
      width: 120px;
      text-align: center;
      line-height: 100%;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .detail{
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .dnum{
        font-size: 30px;
        margin-bottom: 10px;
      }
      .txt{
        font-size: 14px;
        text-align: center;
        color: #999;
      }
    }
  }
  .graph{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card{
      width: 48%;
    }
  }
}
</style>
